<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>js-数据-语法</title>
    <style type="text/css">
    a {
        display: inline-block;
        width: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid red;
        cursor: pointer;
    }
    </style>
</head>

<body style="background: #333;color: #FFF">
    <p style="white-space: pre;">
        ==基础知识的重要性
        几个面试题
        1=》 typeof 能得到哪些类型
        2=》 === ==
        3=》 onload domcontentloaded
        4=》 10个a标签
        5=》 模块加载器
        6=》 数组随机排序
        <div id="div">test</div>
    </p>
    <script type="text/javascript">
    //值类型
    var a = 10;
    var b = a;
    b = 20;
    console.log(a + '' + b); //10 20 
    // 引用类型
    var a = { age: 20 };
    var b = a;
    // 共用类型，节约空间

    // 强制类型转换

    console.log(typeof undefined); //undefined
    console.log(typeof 'bac'); //string
    console.log(typeof 123); //number
    console.log(typeof true); //boolean
    console.log(typeof {}) //obj
    console.log(typeof []) //obj
    console.log(typeof null) //obj
    console.log(typeof console.log) //fn

    // 字符串拼接
    var a = 100 + 10;
    var b = 100 + '10';
    // ==
    console.log(100 == '100');
    a == '';
    null == undefined;
    //if语句
    if (true && 100 && '')
        //逻辑运算符
        console.log(10 && 0)
    console.log('' || 'bac')
    console.log(!window.abc)
    //判断一个变量true或者false   两个！！
    var obj = {};
    obj.a == null // jquery obj.a===null || obj.a==undefined

    // Object--Array--Boolean--Number--String--Function--Date--RegExp--Error
    // json.js中内置对象
    // stringify...parse...数据格式

    // 原型和原型链
    // 如何判断变量是数组
    // 写一个原型链继承的例子
    // 描述new 过程
    // zepto如何使用原型链

    //构造函数 大写字母开头 -- 默认大写
    function Foo(name, age) {
        this.name = name;
        this.age = age;
        this.cl = 'sfs';
        // return this 
    }
    var f1 = new Foo('fsfsfa', 17)
    console.info(f1);

    // - 语法糖 - a={};a=[];function foo(){} new Object,Array,Function

    // 使用 - instanceof - 判断一个函数是否是一个变量的构造函数

    // 原型规则和示例
    // 1.所有的引用类型(数组，对象，函数)，都具有对象特性，自由扩张属性（null 除外）
    // 2.所有的引用类型都有__proto__（隐式原型）
    // 3.所有的函数都有 prototype属性（显式原型）
    // 4.__proto__ 指向(完全等于)它的构造函数的 prototype
    // 5.当试图得到一个对象属性，如果对象没有这个属性，那么去__proto__(Fn prototype)上去找

    var a = [];
    a.amy = 'nann';
    console.log(a.__proto__);

    function fn() {}
    console.log(fn.prototype);
    console.info(fn.__proto__ === Function.prototype);

    fn.__proto__ = null;
    console.log(fn);
    //this
    //循环对象只身属性
    for (item in fn) {
        //for in 可以 基本屏蔽来自原型的属性
        if (f.hasOwnProperty(item)) {}
    }
    // obj.toString() .prototype.prototype...直到null 或者找到为止

    // obj instanceof Object; 也是一层一层的往上走
    // 
    // 一个原型继承的例子
    function Animal(par) {
        this.name = par;
        this.action = 'do sth';
    }

    function Dog(name) {
        this.alias = name;
    }
    Dog.prototype = new Animal('dog');
    var hasiqi = new Dog('hasiqi');
    console.info(hasiqi.action);

    //要更贴近实际项目。。。
    //new 空对象 operation return

    // zepto如何使用原型链
    // 读源码高效提高技能的方式----
    // 不能"埋头",有技巧的读
    // zepto设计和源码分析
    // 
    /////////////
    // 封装dom查询 //
    /////////////
    function Elem(id) {
        this.elem = document.getElementById(id);
    }
    Elem.prototype.html = function(val) {
        var elem = this.elem;
        if (val) {
            elem.innerHTML = val;
            return this //链式操作
        } else {
            console.log(elem.innerHTML);
            return elem.innerHTML;
        }

    }
    Elem.prototype.on = function(type, fn) {
        var elem = this.elem;
        elem.addEventListener(type, fn)
    }

    var div = new Elem('div')
    div.html();
    div.on('click', () => { alert(div.html('test on prototype').toString()) })
    //使用prototype 扩展属性和方法

    //作用域和闭包
    //
    //函数中变量声明提前，赋值undefined 函数声明提前
    //this arguments...类数组
    // 
    fn();

    function fn() {
        console.info('fn');
    }
    // fn1(); undefined
    var fn1 = function fn1() {
        console.info('fn1')
    }
    fn1();

    //执行期上下文 - 全局 函数 - 
    //this 执行时确认 定义时无法确认 ()=>{ 中的 this 在定义时确认 }
    // bind...函数表达式

    
    for (var i = 0; i < 10; i++) {
        var a = document.createElement('a');
        a.innerHTML = i+'i';
        a.addEventListener('click', function(e) {
            e.preventDefault();
            alert(i)
        });
        document.body.appendChild(a)
    }
    document.body.appendChild(document.createElement('br'));
    for (var i = 0; i < 10; i++) {
        var a = document.createElement('a');
        a.index=i;
        a.innerHTML =i+ 'indh';
        a.addEventListener('click', function(e) {
            e.preventDefault();
            // alert(this.index)
             alert(this.innerHTML)
            
        });
        document.body.appendChild(a)}
    document.body.appendChild(document.createElement('br'));
    for (var i = 0; i < 10; i++) {
        var a = document.createElement('a');
        (function(i) {
            a.innerHTML = i+'fn';
            a.addEventListener('click', function(e) {
                e.preventDefault();
                alert(i)
            });
            document.body.appendChild(a)
        })(i)
    }
    var i = 'hei 没想到吧！';


    //封装变量，收敛权限  。。函数对象的灵活性
    function isf() {
        var list = [];
        return function(id) {
            if (list.indexOf(id) >= 0) {
                return false;
            } else {
                list.push(id);
                return true;
            }
        }
    }

    var thisll = isf();
    console.info(thisll(10));
    console.info(thisll(10));
    console.info(thisll(12));
    console.info(thisll(12));
    var thistt = isf();
    console.info(thistt(10));
    console.info(thistt(20));

    //异步和单线程
    //定时任务 网络请求 事件绑定，，，
    console.log(100)
    setTimeout(() => {
        // console.log(200)
    })
    console.log(300)
    // img.onload() 这是啥。。。

    //获取格式日期
    //随机数，长度一致
    //写一个能遍历数组和对象的forEach
    console.log(Date.now());
    console.log(dt=new Date());
    console.info(dt.getTime());
    console.info(dt.getFullYear());
    console.info(dt.getMonth());
    console.info(dt.getDate());
    console.info(dt.getHours());
    console.info(dt.getMinutes());
    console.info(dt.getSeconds());

    //随机数
    //Math.random() 清除缓存...
    //数组api 
    //	forEach every some sort map  filter
    var arr=[12,23,34,18,28];
    arr.forEach((item,index)=>{
    	console.log(item,index);
    })
    var res1=arr.every((item)=>{
    	if(item<35){
    		return true;
    	}
    })

    var res2=arr.every((item)=>{
    	if(item<33){
    		return false;
    	}
    })
    console.info(res1)
    console.info(res2)//...

    var res3=arr.some((item)=>{
    	if(item<33){
    		return true;
    	}
    })
    console.log(res3);
    console.log(arr.sort());
    var arr2=arr.map((item)=>{
    	return "fsfs"+item+'fsfs';
    })
    console.info(arr2);
    var arr2=arr.filter((item)=>{
    	console.log(item);
    	if(item>20){
    		return true;
    	}
    })
    console.info(arr2);
    // for (var item in window){
    // 	console.log(item);
    // }

    // Math.random() round floor ceil slice...
    console.error('er ht')
var rd=Math.random();
 rd+='000000';
var ree=rd.slice(0,11);
console.log(ree)
console.log(rd)




















    </script>
</body>

</html>